<!-- 首页 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../imgs/7fa57f35c179bad9cc9f18e2dd9b1d40.ico" />
    <link rel="stylesheet" href="../plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <title>一加手机官网-一加 9RT 5G，速度有了新名字</title>
    <!-- 1. 引入bootstrap.css -->

    <style>
        #daohang {
            text-align: center;
        }

        .thumbnail {
            padding: 0px;
            border: 0px;
            margin-bottom: 3px;
            position: relative;
        }

        .col-xs-12 {
            padding: 0px;
            border: 0px;
        }

        .col-md-12 {
            padding: 0px;
            border: 0px;
        }

        .navbar-brand {
            padding: 0px;
        }

        .thumbnail .caption {
            padding: 0px;
        }

        .navbar {
            margin-bottom: 0px;
        }

        #ps {
            position: absolute;
            top: 120px;
            left: 110px;
        }

        #ps2 {
            position: absolute;
            top: 50px;
            left: 240px;
        }

        #but2 {
            margin-left: 10px;
            color: #ffffff;
        }

        #but1 {
            color: #ffffff;
        }

        #logo {
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: Roman-55, Helvetica Neue, Helvetica, Arial, sans-serif;
            font-feature-settings: "salt";
            font-weight: 800;
            list-style: none;
            cursor: pointer;
            fill: currentColor;
            line-height: 1;
            color: #f50514;
            font-size: 20px;
            box-sizing: border-box;
            vertical-align: middle;
            /* float: left; */
        }

        #logo> :first-child+li {
            display: inline-block;
            padding-top: 15px;
        }

        #dhl li:hover {
            border-bottom: #f50514;
            border-style: solid;
            border-left-width: 0px;
            border-right-width: 0px;
            border-top-width: 0px;
            border-bottom-width: 5px;
        }

        #a1 {
            padding: 0px;
        }

    </style>
</head>

<body>
    <!-- 导航begin -->
    <div>
        <div class="container-fluid" id="D1">
            <!-- 定义一行 -->
            <div class="row">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <ul class="nav navbar-nav nav-left" id="logo">
                                <li>
                                    <img src="../imgs/OnePlus_Logo.png" style="width: 50px;height: 50px;" alt="">
                                </li>
                                <li id="onepluse">ONEPLUS</li>
                            </ul>
                        </div>
                        <div class="collapse navbar-collapse" id="example-navbar-collapse">

                            <ul class="nav navbar-nav navbar-right" id="dhl">
                                <!-- <li id="l1"><a href="login.html">登录</a></li> -->
                                <li id="l2" class="active"><a href="index.html">首页</a></li>
                                <li id="l3"><a href="shopping cart.html">我的购物车</a></li>
                                <li><a href="story.html" id="Myorder">一加故事</a></li>
                                <li><a href="login.html">安全退出</a></li>
                                <li><a id="a1" href="personal.html"><img src="../imgs/OIP-D.jpg"
                                            style="width: 50px;height: 50px;border-radius: 50%;" alt=""></a></li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
        <!-- 导航end -->

        <!-- 主要信息 -->
        <div class="container-fluid" id="D2">
            <div class="row" id="product">
            </div>
        </div>
    </div>
    <!-- 必须先引入jquery.min.js -->
    <script src="../plugins/jquery.min.js"></script>
    <!-- 引入bootstrap.js -->
    <script src="../plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

    <script>
        //制造数据
        //jquery是js的框架
        let cart_data;

        $.get('../data/product.json', function (data) {

            $(function () {
                //js获取dom对象的一个写法

                //js对象
                //let product = document.getElementById("product");

                //jquery对象
                let product = $("#product");

                let str = "";
                //主要是为了确保dom操作完成之后,才会执行此处的js代码
                //遍历上面的数据的数组
                str += '<div class="col-xs-12 col-md-12"> \
                            <div class="thumbnail"> '
                str += '<img src="../imgs/dfz007.jpg">';
                str += '<div class="caption"> \
                            <div id="ps2">\
                            <p class="text-align: left;" style="color:#ffffff;font-size: 16px;">总有故事 被影像看见</p> \
                            <p class="text-align: left;" style="color:#ffffff;font-size:48px;"></p> \
                            <p class="text-align: left;" style="color:#ffffff;font-size:16px;">和一加品牌代言人周迅、胡歌一起，看见更多影像故事。</p> \
                            <p class="text-align: left;" style="color:#ffffff;font-size:24px;"></p> \
                            <a href="#" role="button">了解更多</a></p>\
                            </div>\
                            </div> \
                            </div> \
                            </div>'                                   
                for (let i = 0; i < 6; i++) {
                    str += '<div class="col-xs-12 col-md-12"> \
                            <div class="thumbnail"> '
                    str += '<img src="../imgs/' + data[i].url + '">';
                    str += '<div class="caption"> \
                            <div id="ps" style="line-height: 1.2;">\
                            <p class="text-align: left;" style="color:#ffffff;font-size: 16px;">'+ data[i].desc + '</p> \
                            <p class="text-align: left;" style="color:#ffffff;font-size:48px;">'+ data[i].name + '</p> \
                            <p class="text-align: left;" style="color:#ffffff;font-size:16px;">'+ data[i].remark + '</p> \
                            <p class="text-align: left;" style="color:#ffffff;font-size:24px;">'+ data[i].price + '</p> \
                            <p class="text-align: left;" style="color:#ffffff;font-size:16px;"><a href="#" role="button" id="but1">立即购买</a> \
                            <a href="#" role="button" id="but2">了解更多</a></p>\
                            <p class="text-align: left;" style="color:#ffffff;font-size:16px;"><span onclick="add_cart('+ i + ')" class="text-warning glyphicon glyphicon-shopping-cart">加入购物车</span></p> \
                            </div>\
                            </div> \
                            </div> \
                            </div>'
                }
                //product.innerHTML = str;
                product.html(str);
                cart_data = data;
            })
        })
        // $(function(){
        //     var gm = localStorage.getItem("carts");
        //     if(gm == null)
        //     {
        //         localStorage.setItem('carts','{"admin":[]}');
        //     }
        // })
        function add_cart(i) {
            let json_str = localStorage.getItem("carts");
            //将json字符串转成json对象
            let json_obj = JSON.parse(json_str);
            let arr = json_obj.admin;
            // console.log(arr[0])
            //将最新得到商品放入到这个数组中
            arr.push(cart_data[i]);

            //再次写入到本地存储中
            localStorage.setItem('carts', '{"admin":' + JSON.stringify(arr) + '}');

            window.location = 'shopping cart.html';
        }
    </script>
</body>

</html>